{% block sw_settings_seo %}
<sw-page class="sw-settings-seo">

    {% block sw_settings_seo_smart_bar_header %}
    <template #smart-bar-header>
        {% block sw_settings_seo_smart_bar_header_title %}
        <h2>
            {% block sw_settings_seo_smart_bar_header_title_text %}
            {{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            />
            {{ $tc('sw-settings-seo.general.textHeadline') }}
            {% endblock %}
        </h2>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_seo_smart_bar_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_seo_smart_bar_actions_add %}
        <mt-button
            variant="primary"
            size="default"
            @click="onClickSave()"
        >
            {{ $tc('sw-settings-seo.general.buttonSave') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_seo_content %}
    <template #content>
        <sw-card-view>
            {% block sw_settings_seo_content_inner %}
            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            {# v-show is used here as underlying components influence the loading state and v-if would destroy this behaviour #}
            <div v-show="!isLoading">
                {% block sw_settings_seo_content_inner_seo_url_template %}
                <sw-seo-url-template-card ref="seoUrlTemplateCard" />
                {% endblock %}

                {% block sw_settings_seo_content_inner_redirect %}
                <sw-system-config
                    ref="systemConfig"
                    domain="core.seo"
                    @loading-changed="onLoadingChanged"
                />
                {% endblock %}
            </div>

            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
